<template>
  <div class="index">
    <div class="searchBox">
      <div class="s_top">
        <van-field v-model="value1" left-icon="search" placeholder="搜索商品" />
      </div>
      <div class="s_center">
        <van-tabs
          @click-tab="topTabFn"
          color="white"
          title-inactive-color="white"
          title-active-color="white"
          background="linear-gradient(
      90deg,
      rgb(246, 44, 44) 50%,
      rgb(249, 110, 41) 100%
    )"
        >
          <van-tab
            v-for="(item, index) in tabInfo"
            :key="index"
            :name="item.id"
            :title="item.cate_name"
          ></van-tab>
        </van-tabs>
      </div>
      <banner class="bannerBox" />
    </div>
    <div class="navBox">
      <van-grid :column-num="4">
        <van-grid-item v-for="(v, i) in valueList" :key="i" :url="v.url">
          <!-- <img :src="v.img" alt="" /> -->
          <van-image :src="v.img" />
          <p>{{ v.text }}</p>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="couponBox">
      <div class="c_item" v-for="(v, i) in dataInfo" :key="i">
        <div :class="session ? ' c_left leftColor' : 'c_left'">
          <h3><span>￥</span>{{ v.coupon_price }}</h3>
          <p>满10元可用</p>
        </div>
        <div :class="session ? 'c_right rightColor' : 'c_right'">
          <p>{{ session ? "已领取" : "立即领取" }}</p>
        </div>
      </div>
    </div>

    <div class="nav_bd">
      <div v-for="(v, i) in nav_db" :key="i" @click="tabFn(i, v.id)">
        {{ v.title }}
        <span :class="i == index ? 'a' : 'b'">最新出炉</span>
      </div>
    </div>
    <div class="list_box">
      <dl v-for="(v, i) in listInfo" :key="i" @click="onDetails(v.id)">
        <dd><img v-lazy="v.image" alt="" /></dd>
        <dt>
          <p class="line1">
            {{ v.store_name }}
          </p>
          <s>￥{{ v.ot_price }}</s>
          <span>￥{{ v.price }}</span>
        </dt>
      </dl>
    </div>
  </div>
</template>

<script setup>
import { TagInfo, list_box, coupon } from "../../api/index";
import { ref, onMounted, reactive } from "vue";
import banner from "../../components/index/banner.vue";
import { useRouter } from "vue-router";
import { useStore } from "../../stores/stors";
const store = useStore();
const router = useRouter();
const tabInfo = ref([]);
const valueList = reactive([
  { url: "/goods_cate", text: "商品分类", img: "img/1.png" },
  { url: "/user_get_coupon", text: "领优惠券", img: "img/1.png" },
  { url: "/news_list/index", text: "行业此讯", img: "img/2.png" },
  { url: "/user_goods_collection", text: "我的收藏", img: "img/3.png" },
  { url: "/goods_combination/index", text: "拼团活动", img: "img/4.png" },
  { url: "/goods_seckill/index", text: "秒杀活动", img: "img/5.png" },
  { url: "/goods_bargain/index", text: "砍价活动", img: "img/6.png" },
  { url: "/user_address_list/index", text: "地址管理", img: "img/7.png" },
]);
const nav_db = ref([
  { id: 3, title: "首发新品" },
  { id: 1, title: "精品推荐" },
  { id: 2, title: "热门榜单" },
  { id: 4, title: "促销单品" },
]);
const listInfo = ref([]);
const dataInfo = ref([]);
const index = ref(0);
const session = ref(store.loginToken);

// 头部tab点击跳转
const topTabFn = ({ name, title }) => {
  console.log(name);
  router.push({
    path: "/goods_list",
    query: { cid: name, title: title },
  });
};
// 主体tab点击跳转
const tabFn = (i, id) => {
  index.value = i;
  listFn(id);
};
// 底部商品列表请求
const listFn = (id) => {
  list_box(id).then((res) => {
    listInfo.value = res.data.list;
    console.log(listInfo.value);
  });
};
// 点击跳转详情
const onDetails = (id) => {
  router.push({
    path: "/goods_details",
    query: { id: id },
  });
};
onMounted(() => {
  TagInfo().then((res) => {
    let arr = [
      {
        cate_name: "首页",
      },
      ...res.data,
    ];
    tabInfo.value = arr;
  });
  listFn(3);
  coupon().then((res) => {
    dataInfo.value = res.data;
  });
});
</script>

<style lang="less">
.index {
  width: 100%;
  // height: 100%;
  background: #f5f5f5;
  .searchBox {
    margin-bottom: 130px;
    background: linear-gradient(
      90deg,
      rgb(246, 44, 44) 50%,
      rgb(249, 110, 41) 100%
    );
    height: 140px;
    .s_top {
      padding: 10px 25px;
      .van-field {
        border-radius: 18px;
      }
    }
    .bannerBox {
      border-radius: 10px;
      margin-top: 10px;
      width: 90%;
      margin-left: 5%;
      height: 150px;
    }
  }

  .van-grid {
    // border: 0;
    // height: 200px;
    margin-top: 150px;
  }
  .van-grid-item {
    height: 80px;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    p {
      margin-top: 10px;
      font-size: 12px;
    }
  }
  .van-grid-item__content {
    background-color: #f5f5f5 !important;
  }

  .nav_bd {
    margin-top: 20px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 16px;
    div {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      span {
        font-size: 12px;
        margin-top: 5px;
      }
    }
  }
  .couponBox {
    // height: 67px;
    // margin: 10px;
    padding: 10px;
    display: flex;
    // width: 100%;
    overflow: auto;
    .c_item {
      flex: none;
      width: 160px;
      display: flex;
      color: #fff;
      margin-right: 10px;
      .c_left {
        width: 99%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 5px;
        // border-radius: 5px 0px 20px 0;
        background: radial-gradient(
          circle at right top,
          transparent 0.3em,
          #e93323 0
        );
        h3 {
          font-weight: 100;
          span {
            font-size: 16px;
          }
        }
        p {
          font-size: 13px;
        }
      }
      .c_right {
        background: radial-gradient(
          circle at left top,
          transparent 0.6em,
          #e93323 0
        );
        border-left: 1px dashed #fff;
        font-size: 11px;
        padding: 5px 10px;
        -webkit-writing-mode: vertical-lr;
        writing-mode: vertical-lr;
        p {
          text-align: center;
        }
      }
      .leftColor {
        background: radial-gradient(
          circle at right top,
          transparent 0.3em,
          #dddddd 0
        );
      }
      .rightColor {
        background: radial-gradient(
          circle at left top,
          transparent 0.6em,
          #dddddd 0
        );
      }
    }
  }
  .list_box {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 45% 45%;
    grid-template-rows: 260px 260px;
    grid-gap: 10px 10px;
    justify-content: center;
    dl {
      // margin: 5px 2.5%;
      width: 100%;

      border-radius: 10px;
      background: #fff;

      dd {
        width: 100%;
        height: 173px;
        img {
          width: 100%;
          border-radius: 10px 10px 0 0;
        }
      }

      dt {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 5px;
        p {
          font-size: 16px;
        }
        s {
          font-size: 13px;
          color: #aaa;
        }
        span {
          color: rgb(249, 84, 41);
          font-size: 18px;
          font-weight: 550;
        }
      }
    }
  }
  .b {
    color: #999;
  }
  .a {
    border-radius: 20px;
    background: linear-gradient(
      90deg,
      rgb(246, 44, 44) 50%,
      rgb(249, 110, 41) 100%
    );
    color: white;
    padding: 0 5px;
  }
  // 溢出显示省略号
  .line1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
